<template>
<baidu-map
  :class="$style.box"
  :ak="ak"
  :center="center"
  :zoom="zoom"
  :scroll-wheel-zoom="true"
  :map-click="false"
  @click="onClick"
  @moving="syncCenterAndZoom"
  @moveend="syncCenterAndZoom"
  @zoomend="syncCenterAndZoom"
>
  <p v-if="msg" :class="$style.err">
    {{ msg }}
  </p>
  <bm-marker v-if="position" :position="position">
    <bm-label
      :content="lnglat"
      :offset="{width: -55, height: -20}"
      :label-style="{color: 'red', fontSize : '12px'}"
    />
  </bm-marker>
  <bm-boundary
    :name="boundary"
    :stroke-weight="2"
    stroke-color="blue"
    fill-color=""
    stroke-style="dashed"
  />
  <bm-local-search
    v-if="visible"
    :keyword="boundary + keyword"
    :auto-viewport="true"
    :location="region"
    :panel="false"
    force-local
  />
</baidu-map>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue';
import BmMarker from 'vue-baidu-map/components/overlays/Marker.vue';
import BmLabel from 'vue-baidu-map/components/overlays/Label.vue';
import BmBoundary from 'vue-baidu-map/components/others/Boundary.vue';
import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch.vue';

export default {
  components: {
    BaiduMap,
    BmMarker,
    BmLabel,
    BmBoundary,
    BmLocalSearch,
  },
  props: ['center', 'position', 'ak', 'zoom', 'boundary',
          'keyword', 'visible', 'region', 'msg'],
  data() {
    return {
    };
  },
  computed: {
    lnglat(){
      const { lng, lat } = this.position;
      return lng +','+ lat;
    },
  },
  methods: {
    syncCenterAndZoom (e) {
      const { target } = e;
      const center = target.getCenter();
      this.$emit('update:center', center);
      const zoom = target.getZoom();
      this.$emit('update:zoom', zoom);
    },
    onClick(e) {
      const { point } = e;
      this.$emit('update:position', point);
      this.$emit('reverse', point);
    },
  },
};
</script>

<style lang="less" module>
.box{
  width: 100%;
  height: 100%;
  display: flex;
}
.err{
  margin: 0;
  padding: 3px 10px;
  position: absolute;
  color: #f00;
  background: #fff;
  font-size: 14px;
}
</style>
